<template>
	<view>
		<navbar @GetMoveList="getMoveList" @getMore="getMore"></navbar>
		<!-- 电影列表 -->
		<view class="move_list">
			<view class="move_item" v-for="(item,index) in move_list" :key="index" @click="toDetail(item._id)">
				<image :src="item.img" class="nav_img"></image>
				<view class="name">{{item.movie_name}}</view>
				<view class="actor">{{item.actor.length>0?item.actor:"未知"}}</view>
			</view>
			<view style="display: flex;justify-content: center;width: 100%;">
				<uni-load-more :status="status"></uni-load-more>
			</view>
		</view>
	</view>
</template>

<script>
	import navbar from '../../components/sort_head/sort_head.vue'
	export default {
		components: {
			navbar
		},
		data() {
			return {
				move_list: "",
				type: "",
				page: 1,
				size: 12,
				status: "more"
			}
		},
		methods: {
			getMoveList(Value) {
				this.type = Value
				this.ininData()
			},
			toDetail(id) {
				uni.navigateTo({
					url: `../detail/detail?id=${id}`
				})
			},
			// 初始化数据
			async ininData() {
				let res = await uniCloud.callFunction({
					name: "sort_list",
					data: {
						type: this.type,
						page:1,
						size: 12
					}
				})
				this.page=1
				this.move_list = res.result.data
					if (res.result.data.length == this.size) {
						this.status = "more"
					} else {
						this.status = "noMore"
					}
			},
			// 加载更多
			async getMore(){
				let res = await uniCloud.callFunction({
					name: "sort_list",
					data: {
						type: this.type,
						page:this.page,
						size: this.size
					}
				})
				this.move_list =[...this.move_list, ...res.result.data]
					if (res.result.data.length == this.size) {
						this.status = "more"
					} else {
						this.status = "noMore"
					}
			}
		},
		onReachBottom() {
			if (this.status == "more") {
				this.status = "loading"
				this.page = this.page+1
				this.getMore()
			}

		}
	}
</script>

<style scoped>
	.nav_img {
		width: 200rpx;
		height: 300rpx;
	}

	.move_list {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		padding-top: 20rpx;
	}

	.move_item {
		display: flex;
		flex-direction: column;
		align-items: center;
		/* flex: 1; */
		width: 33.3%;
		margin-bottom: 20rpx;

	}

	.actor {
		font-size: 23rpx;
		color: rgba(0, 0, 0, 0.6);
		width: 200rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		text-align: center;
	}

	.name {
		width: 200rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		text-align: center;
	}
</style>
